<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循着灵魂找到你</title>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script>
(function(win, lib) {
    var doc = win.document; //当前文档对象
    var docEl = doc.documentElement; //文档对象根元素的只读属性
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});
 
    if (metaEl) { 
    //当meta中viewport的标签设置了scale时，将根据scale手动设置dpr
        console.warn('将根据已有的meta标签来设置缩放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {   
    //当meta中flexible的标签存在时，据此设置dpr
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }
    }

    if (!dpr && !scale) { 
    //根据js获取到的devicePixelRatio设置dpr及scale，scale是dpr的倒数
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，分别用2和3倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    //文本字号不建议使用rem，flexible适配方案中，文本使用px作为单位，使用[data-dpr]属性来区分不同dpr下的文本字号
    
    if (!metaEl) {
    //添加meta标签，设置name为viewport，content根据scale设置缩放比(默认、最大、最小缩放比)
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        //更新rem值
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10; //1rem = viewWidth / 10
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
    
    //resize与pageshow延时300ms触发refreshRem(),使用防抖函数，防止事件被高频触发可能引起性能问题
    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        //当一条会话历史纪录被执行的时候触发事件，包括后退/前进按钮，同时会在onload页面触发后初始化页面时触发
        if (e.persisted) {//表示网页是否来自缓存
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    //在html文档加载和解析完成后设置body元素字体大小
    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    } 
    //浏览器有最小字体限制，css在pc上font-size是12px(移动端最小是8px), 也就是css像素是12，其DPR为1，在移动端dpr有可能为2和3，为了保证字体不变小，需要用12*dpr进行换算。
   
    refreshRem();

   //实现rem与px相互转换
    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));
</script>
<script>
  
  	// console.log('JS 脚本执行');
    // measurements
    self.count_e = 0;
    self.count_i = 0;
    self.count_s = 0;
    self.count_n = 0;
    self.count_t = 0;
    self.count_f = 0;
    self.count_j = 0;
    self.count_p = 0;

    self.EI = 0;
    self.SN = 0;
    self.TF = 0;
    self.JP = 0;

    self.male = false;
    self.man = false;
    self.lmale = false;
    self.lman = false;
    
    self.mbti = '';
    self.sex = '';
    self.gender = '';
    self.love_sex = '';
    self.love_gender ='';
  
    window.data = Object.create(null);
    window.onload = function(){
      
        var url = '<?php echo G_STATIC_URL;?>/js/MBTI93.json';
        var request = new XMLHttpRequest();
        request.open("get",url);
        request.send(null);
        request.onload = function(){
            if (request.status == 200){
                window.data = JSON.parse(request.responseText);
                console.log(window.data);
                
                for (i=0;i<Object.keys(window.data).length;i++){
                }

                self.counter = 1;
                self.total = Object.keys(window.data).length;

                self.questionBox = document.getElementsByClassName('questionBox')[0];
                self.question = document.getElementsByClassName('question')[0];
                self.optionA = document.getElementsByClassName('optionA')[0];
                self.optionB = document.getElementsByClassName('optionB')[0];
                self.inputBox = document.getElementsByClassName('inputBox')[0];
                self.outputBox = document.getElementsByClassName('outputBox')[0];
                self.countBox = document.getElementsByClassName('countBox')[0];
              
              	self.form = document.getElementById('mbti_result');
              	self.ei_box = document.getElementsByName('ei')[0];
              	self.sn_box = document.getElementsByName('sn')[0];
              	self.tf_box = document.getElementsByName('tf')[0];
              	self.jp_box = document.getElementsByName('jp')[0];
              	self.mbti_box = document.getElementsByName('mbti_type')[0];
              	self.sex_box = document.getElementsByName('sex')[0];
               	self.gender_box = document.getElementsByName('gender')[0];
              	self.love_sex_box = document.getElementsByName('love_sex')[0];
                self.love_gender_box = document.getElementsByName('love_gender')[0];

                if (self.question){
                    self.question.innerHTML = self.data[self.counter].Question;
                }

                optionA.innerHTML = self.data[self.counter].OptionA;
                optionB.innerHTML = self.data[self.counter].OptionB;
                countBox.innerHTML = self.counter.toString() + ' / ' + self.total.toString();

            }
        }

    }

    function startTest(){

        var version = 'v 1.0.3';
        var log = '1.添加结果排序功能';
        console.log('version',version);
        console.log('更新日志\n'+log);

		var uid =  '<?php echo $this->user_id;?>';
      	if (uid>0){
            document.getElementsByClassName("notice")[0].style.visibility = "hidden"; // for debugging
        }else{
          	alert("您尚未登录，请登录后重试");
			window.location.href = "/account/login/";
        }

    }

    function clickA(){
      
		var uid = '<?php echo $this->user_id;?>';      
      	if (uid>0){
        	self.counter++;
        }else{
          	alert("您尚未登录，请登录后重试");
           	window.location.href = "/account/login/";
        }
      
        console.log(self.data[self.counter-1]);

        if (self.counter<=self.total){
                
            if (self.question){
                self.question.innerHTML = self.data[self.counter].Question;
            }

            optionA.innerHTML = self.data[self.counter].OptionA;
            optionB.innerHTML = self.data[self.counter].OptionB;

        switch(self.data[self.counter-1].MeasurementA) {
            case 'E':
                self.count_e++;
                console.log('e:',self.count_e);
            break;
            case 'I':
                self.count_i++;
                console.log('i:',self.count_i);
            break;
            case 'S':
                self.count_s++;
                console.log('s:',self.count_s);
            break;
            case 'N':
                self.count_n++;
                console.log('n:',self.count_n);
            break;                
            case 'T':
                self.count_t++;
                console.log('t:',self.count_t);
            break;
            case 'F':
                self.count_f++;
                console.log('f:',self.count_f);
            break;
            case 'J':
                self.count_j++;
                console.log('j:',self.count_j);
            break;
            case 'P':
                self.count_p++;
                console.log('p:',self.count_p);
            break;
            case 'Male':
                self.male = true;
                console.log('Male');
            break;
            case 'Female':
                self.male = false;
                console.log('Female');
            break;
            case 'Man':
                self.man = true;
                console.log('Man');
            break;
            case 'Woman':
                self.man = false;
                console.log('Woman');
            break;
            case 'LMale':
                self.lmale = true;
                console.log('LMale');
            break;
            case 'LFemale':
                self.lmale = false;
                console.log('LFemale');
            break;
            case 'LMan':
                self.lman = true;
                console.log('LMan');
            break;
            case 'LWoman':
                self.lman = false;
                console.log('LWoman');
            break;
        } 

        if (countBox){
            countBox.innerHTML = self.counter.toString() + ' / ' + self.total.toString();
        }
          
      }
      
      if (self.counter==self.total+1){
        self.EI = (self.count_e-self.count_i) / (self.count_e+self.count_i);
        ei_box.value = EI;
        console.log(self.count_e,self.count_i,self.EI);
        self.SN = (self.count_s-self.count_n) / (self.count_s+self.count_n);
        sn_box.value = SN;
        console.log(self.count_s,self.count_n,self.SN);
        self.TF = (self.count_t-self.count_f) / (self.count_t+self.count_f);
        tf_box.value = TF;
        console.log(self.count_t,self.count_f,self.TF);
        self.JP = (self.count_j-self.count_p) / (self.count_j+self.count_p);
        jp_box.value = JP;
        console.log(self.count_j,self.count_p,self.JP);

        (EI>0)?(self.mbti= self.mbti+ "E"):(self.mbti= self.mbti+ "I");
        (SN>0)?(self.mbti= self.mbti+ "S"):(self.mbti= self.mbti+ "N");
        (TF>0)?(self.mbti= self.mbti+ "T"):(self.mbti= self.mbti+ "F");
        (JP>0)?(self.mbti= self.mbti+ "J"):(self.mbti= self.mbti+ "P");
        mbti_box.value = mbti;
        console.log(self.mbti);

        male?(self.sex = self.sex+ "男"):(self.sex= self.sex+ "女");
        sex_box.value = sex;
        console.log('sex:',self.sex);
        man?(self.gender = self.gender+ "男"):(self.gender= self.gender+ "女");
        gender_box.value = gender;
        console.log('gender:',self.gender);
        lmale?(self.love_sex = self.love_sex+ "男"):(self.love_sex= self.love_sex+ "女");
        love_sex_box.value = love_sex;
        console.log('like male?:',self.love_sex);
        lman?(self.love_gender = self.love_gender+ "男"):(self.love_gender= self.love_gender+ "女");
        love_gender_box.value = love_gender;
        console.log('like man?:',self.love_gender);

        $.post("/mbti/ajax/submit/",$("#mbti_result").serialize());
        alert('提交成功，正在返回配对结果');

        this.showResult();
        document.getElementsByClassName("container")[0].style.visibility = "hidden";

        // document.writeln(EI);
        // document.writeln(SN);
        // document.writeln(TF);
        // document.writeln(JP);

        // document.writeln(mbti);
        // document.writeln(sex);
        // document.writeln(gender);
        // document.writeln(love_sex);
        // document.writeln(love_gender);
        
    }

}

    function clickB(){

		var uid = '<?php echo $this->user_id;?>';
      	if (uid>0){
        	self.counter++;
        }else{
          	alert("您尚未登录，请登录后重试");
			window.location.href = "/account/login/";
        }
        
        console.log(self.data[self.counter-1]);

        if (self.counter<=self.total){
            
            if (question){
                question.innerHTML = data[self.counter].Question;
            }

            optionA.innerHTML = data[self.counter].OptionA;
            optionB.innerHTML = data[self.counter].OptionB;

        switch(data[self.counter-1].MeasurementB) {
            case 'E':
                self.count_e++;
                console.log('e:',self.count_e);
            break;
            case 'I':
                self.count_i++;
                console.log('i:',self.count_i);
            break;
            case 'S':
                self.count_s++;
                console.log('s:',self.count_s);
            break;
            case 'N':
                self.count_n++;
                console.log('n:',self.count_n);
            break;                
            case 'T':
                self.count_t++;
                console.log('t:',self.count_t);
            break;
            case 'F':
                self.count_f++;
                console.log('f:',self.count_f);
            break;
            case 'J':
                self.count_j++;
                console.log('j:',self.count_j);
            break;
            case 'P':
                self.count_p++;
                console.log('p:',self.count_p);
            break;
            case 'Male':
                self.male = true;
                console.log('Male');
            break;
            case 'Female':
                self.male = false;
                console.log('Female');
            break;
            case 'Man':
                self.man = true;
                console.log('Man');
            break;
            case 'Woman':
                self.man = false;
                console.log('Woman');
            break;
            case 'LMale':
                self.lmale = true;
                console.log('LMale');
            break;
            case 'LFemale':
                self.lmale = false;
                console.log('LFemale');
            break;
            case 'LMan':
                self.lman = true;
                console.log('LMan');
            break;
            case 'LWoman':
                self.lman = false;
                console.log('LWoman');
            break;
        } 

        if (countBox){
            countBox.innerHTML = self.counter.toString() + ' / ' + self.total.toString();
        }

      }
      
      if (self.counter==self.total+1){
        self.EI = (self.count_e-self.count_i) / (self.count_e+self.count_i);
        ei_box.value = EI;
        console.log(self.count_e,self.count_i,self.EI);
        self.SN = (self.count_s-self.count_n) / (self.count_s+self.count_n);
        sn_box.value = SN;
        console.log(self.count_s,self.count_n,self.SN);
        self.TF = (self.count_t-self.count_f) / (self.count_t+self.count_f);
        tf_box.value = TF;
        console.log(self.count_t,self.count_f,self.TF);
        self.JP = (self.count_j-self.count_p) / (self.count_j+self.count_p);
        jp_box.value = JP;
        console.log(self.count_j,self.count_p,self.JP);

        (EI>0)?(self.mbti= self.mbti+ "E"):(self.mbti= self.mbti+ "I");
        (SN>0)?(self.mbti= self.mbti+ "S"):(self.mbti= self.mbti+ "N");
        (TF>0)?(self.mbti= self.mbti+ "T"):(self.mbti= self.mbti+ "F");
        (JP>0)?(self.mbti= self.mbti+ "J"):(self.mbti= self.mbti+ "P");
        mbti_box.value = mbti;
        console.log(self.mbti);

        male?(self.sex = self.sex+ "男"):(self.sex= self.sex+ "女");
        sex_box.value = sex;
        console.log('sex:',self.sex);
        man?(self.gender = self.gender+ "男"):(self.gender= self.gender+ "女");
        gender_box.value = gender;
        console.log('gender:',self.gender);
        lmale?(self.love_sex = self.love_sex+ "男"):(self.love_sex= self.love_sex+ "女");
        love_sex_box.value = love_sex;
        console.log('like male?:',self.love_sex);
        lman?(self.love_gender = self.love_gender+ "男"):(self.love_gender= self.love_gender+ "女");
        love_gender_box.value = love_gender;
        console.log('like man?:',self.love_gender);

        $.post("/mbti/ajax/submit/",$("#mbti_result").serialize());
        alert('提交成功，正在返回配对结果');

        this.showResult();
        document.getElementsByClassName("container")[0].style.visibility = "hidden";

        // document.writeln(EI);
        // document.writeln(SN);
        // document.writeln(TF);
        // document.writeln(JP);

        // document.writeln(mbti);
        // document.writeln(sex);
        // document.writeln(gender);
        // document.writeln(love_sex);
        // document.writeln(love_gender);
      
    }

}

    function showResult(){

        var self = this;

        var users_info = <?php echo json_encode($this->user); ?>;
        // console.log(users_info);
        var users_list = <?php echo json_encode($this->sheet); ?>;
        // console.log(users_list);

        var subject = '<?php echo $this->user_id;?>';
        this.subject_ei = 0;
        this.subject_sn = 0;
        this.subject_tf = 0;
        this.subject_jp = 0;

        this.has_result = false;

        for (i=0;i<users_list.length;i++){
            if (subject==users_list[i].uid){
                self.subject_ei = users_list[i].ei;
                self.subject_sn = users_list[i].sn;
                self.subject_tf = users_list[i].tf;
                self.subject_jp = users_list[i].jp;
                document.getElementsByClassName("container")[0].style.visibility = "hidden"; // for debugging
                this.has_result = true;
            }
        }

        if (!this.has_result){
            alert('您好像还没有测试过哦！');
        }

        this.results = {};

        for (i=0;i<users_list.length;i++){
            if (subject!=users_list[i].uid){
                var variance = (users_list[i].ei - self.subject_ei) * (users_list[i].ei - self.subject_ei) + (users_list[i].sn - self.subject_sn) * (users_list[i].sn - self.subject_sn) + (users_list[i].tf - self.subject_tf) * (users_list[i].tf - self.subject_tf) + (users_list[i].jp - self.subject_jp) * (users_list[i].jp - self.subject_jp);
                // console.log('variance',variance);
                var standard_deviation = Math.sqrt(variance);
                // console.log('standard_deviation',standard_deviation);
                //var harmony_value = (1-(variance*0.0625))*100; //使用方差计算
                var harmony_value = (1-(standard_deviation*0.25))*100; //使用标准差计算
                harmony_value = harmony_value.toFixed(2);
                this.results[i] = parseFloat(harmony_value);
            }
        }

        console.log(this.results);
        this.res = Object.keys(this.results).sort(function(a,b){return this.results[b]-this.results[a];});
        console.log(res);

        for (i=0;i<users_list.length-1;i++){
            // console.log(this.res[i]);
            if (subject!=users_list[this.res[i]].uid){
                //console.log(users_list[i]);

                var result = document.createElement('tr');

                var td1 = document.createElement('td');
                var uid = users_list[this.res[i]].uid;
                var a = document.createElement('a');
                a.setAttribute('class','avatar');
                a.setAttribute('href','/?/people/'+users_list[this.res[i]].uid);
                a.setAttribute('rel','nofollow');
                var avatar = document.createElement('img');
                var avatar_link = users_info[uid].avatar_file;
                if (avatar_link != null){
                    avatar.setAttribute('src','/uploads/avatar/'+ avatar_link.replace("min","max"));
                }
                else{
                    avatar.setAttribute('src','/static/common/avatar-max-img.png');
                }
                a.appendChild(avatar);
                td1.appendChild(a);
                
                var td2 = document.createElement('td');
                var username = document.createElement('h6');
                username.innerText = users_info[uid].user_name;
                // console.log(username);
                td2.appendChild(username);

                var td3 = document.createElement('td');
                var harmony = document.createElement('h6');
                var harmony_value = this.results[this.res[i]];
                harmony.innerText = '合拍度 ' + harmony_value + '%';
                td3.appendChild(harmony);

                result.appendChild(td1);
                result.appendChild(td2);
                result.appendChild(td3);
                document.getElementById('friends').appendChild(result);
            }
        }
    }

</script>
  <style>
    img {
        border-radius: 8px;
        border: 1px solid #ddd;
        padding: 5px;
        max-width: 40%;
        height: auto;
    }
    .notice {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #FCFCFC;
        color: #fff;
        font-weight: 100;
        padding: auto;
        box-shadow: 0 0 0px rgba(0, 0, 0, .3);
        z-index:1;
    }
    .notice > .noticeTitle {
        float: top;
        text-align: center;
        position: relative;
        width: 100%;
        height: auto;
        padding: 100px 0px 30px 0px;
        line-height: 28px;
        font-size: 28px;
        font-weight: bold;
        color: #58C1E4; 
     	padding:30px auto; 
        outline:none;
        border: none;
        resize: none;
        background-color: #FCFCFC;
    }
    .notice > .noticeText {
        float: top;
        text-align: center;
        position: relative;
        width: 100%;
        height: 10%;
        padding: 10px 30px 10px 30px;
        line-height: 28px;
        font-size: 20px;
        font-weight: bold;
        color: #58C1E4; 
     	padding:30px auto; 
        outline:none;
        border: none;
        resize: none;
        background-color: #FCFCFC;
    }
    .notice > .noticeButton {
        margin:30px auto;
        max-width: 200px;
        position: relative;
        text-align: center;
        font-weight: bold;
        background-color: #58C1E4;
        padding: 0 16px;
        font-size: 18px;
        line-height: 48px;
        border-radius: 4px;
        cursor: pointer;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .container {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #FCFCFC;
        color: #fff;
        font-weight: 100;
        padding: auto;
        box-shadow: 0 0 0px rgba(0, 0, 0, .3);
        z-index:0;
    }

    .container > .questionBox {
        float: top;
        text-align: center;
        position: relative;
        width: 100%;
        height: 42%;
        line-height: 42px;
        font-size: 28px;
        font-weight: bold;
        color: #58C1E4; 
     	padding:30px 0 30px 0; 
        outline:none;
        border: none;
        resize: none;
        background-color: #FCFCFC;
    }

    .container > .optionA {
        margin:30px auto;
        max-width: 200px;
        position: relative;
        text-align: center;
        font-weight: bold;
        background-color: #58C1E4;
        padding: 0 16px;
        font-size: 18px;
        line-height: 48px;
        border-radius: 4px;
        cursor: pointer;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .container > .optionB {
        margin:30px auto;
        max-width: 200px;
        position: relative;
        text-align: center;
        font-weight: bold;
        background-color: #58C1E4;
        padding: 0 16px;
        font-size: 18px;
        line-height: 48px;
        border-radius: 4px;
        cursor: pointer;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .container > .countBox {
        text-align: center;
        position: relative;
        font-weight: bold;
        width: 100%;
        font-size: 14px;
        color: #58C1E4;  
    }

    .container > .showresult {
    /*     bottom: 20px;
        width: 100%;
        position: relative;
        text-align: center;
        font-weight: bold;
        background-color: #58C1E4;
        padding: 10px 20px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 4px;
        cursor: pointer; */
        margin:30px auto;
        max-width: 200px;
        position: relative;
        text-align: center;
        font-weight: bold;
        background-color: #58C1E4;
        padding: 0 10px;
        font-size: 14px;
        line-height: 36px;
        border-radius: 4px;
        /* visibility:hidden; */

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .container > .form-horizontal {
    	display:none;
    }

    .result {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #FCFCFC;
        color: #fff;
        font-weight: 100;
        padding: auto;
        box-shadow: 0 0 0px rgba(0, 0, 0, .3);
        z-index:-1;
    }

    .result > .titleBox {
        float: top;
        text-align: center;
        position: relative;
        width: 100%;
        height: auto;
        line-height: 42px;
        font-size: 28px;
        font-weight: bold;
        color: #58C1E4; 
     	padding:10px 10px 10px 10px;
        outline:none;
        border: none;
        resize: none;
        background-color: #FCFCFC;
    }

</style>
</head>
 <body>
    <div class='notice'>
        <table class='noticeTitle'><tr><td><div>循着灵魂找到你</div><td></tr></table>
        <table class='noticeText'><tr><td><div><h5>本测试基于迈尔斯布里格斯类型指标（MBTI）进行设计，可通过一系列问题分析出您的人格类型，继而为您匹配与您灵魂气质相符的对象及适合恋爱的人选</h5></div><td></tr><tr><td><div><h5>合拍度计算公式：你与他的合拍度 = [1 - √(你更外向还是内向 - 他更外向还是内向)² + (你更相信直觉还是实感 - 他更相信直觉还是实感)² + (你更感性还是理性 - 他更感性还是理性)² - (你更有计划性还是更随性 - 他更有计划性还是更随性)²] * 100% （即你与对方区别的标准差）</h5></div><td></tr></table>
        <table class='noticeButton' onclick="startTest()"><tr><td><div>明白啦，开始测试！</div></td></tr></table>
    </div>
    <div class='container'>
    <table class='questionBox'><tr><td><div class='question'>当你要外出一整天，你会</div><td></tr></table>
    <div class='optionA' onclick="clickA()">选项A</div>
    <div class='optionB' onclick="clickB()">选项B</div>
    <div class='countBox'>1 / 93</div>
    <table class='showresult' onclick="showResult()"><tr><td><div>我已测过，显示结果</div></td></tr></table>
    <form action="<?php echo $this->sites_apply_url;?>" class="form-horizontal"  method="post" id="mbti_result">
        <div class="form-group">
                <input type="text" name="ei" class="form-control">
        </div>
        <div class="form-group">
                <input type="text" name="sn" class="form-control">
        </div>
        <div class="form-group">
                <input type="text" name="tf" class="form-control">
        </div>
        <div class="form-group">
                <input type="text" name="jp" class="form-control">
        </div>
        <div class="form-group">
                <input type="text" name="mbti_type" class="form-control">
        </div>
        <div class="form-group">
                <input type="text" name="sex" class="form-control">
        </div>
        <div class="form-group">
                <input type="text" name="gender" class="form-control">
        </div>
        <div class="form-group">
                <input type="text" name="love_sex" class="form-control">
        </div>
        <div class="form-group">
                <input type="text" name="love_gender" class="form-control">
        </div>
    </form>
    </div>
    <div class='result'>
        <table class='titleBox'>
            <tr><th><div class='title'>气场相合的人</div><th></tr>
        </table>
        <table class='titleBox' id='friends'></table>
    </div>
  </body>
 </html>